<!-- html -->
<template>
  <h2 class="h2">路由守卫</h2>
  <RouterLink class="routerLink1" to="/routeHome/routeGuardTest1/routeGuardTest1Home">首页</RouterLink>
  <RouterLink class="routerLink1" to="/routeHome/routeGuardTest1/routeGuardTest1Page1">页面1</RouterLink>
  <RouterLink class="routerLink1" to="/routeHome/routeGuardTest1/routeGuardTest1Page2">页面2</RouterLink>
  <hr class="hr1">
  <RouterView />
</template>

<!-- js或ts -->
<script lang="ts">
export default {
  name: 'routeGuardTest1'
}
</script>

<!-- js或ts -->
<script setup lang="ts">
import { onBeforeRouteUpdate } from 'vue-router'
//方法
//路由更新前
onBeforeRouteUpdate((to, from, next) => {
  console.log('路由更新前')
  console.log('to：', to)
  console.log('from：', from)
  console.log('next：', next)
  if (confirm('我是组件路由更新前守卫，确定跳转吗？')) {
    next();
  }
})
</script>

<!-- 样式 -->
<style scoped></style>